import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html/html_parser.dart';
import 'package:flutter_html/style.dart';

class NewsContentPage extends StatefulWidget {
  Map arguments;
  NewsContentPage({this.arguments});

  @override
  _NewsContentPageState createState() => _NewsContentPageState(this.arguments);
}

class _NewsContentPageState extends State<NewsContentPage> {
  String _html = """
    <h1>Header 1</h1>
    <h2>Header 2</h2>
    <h3>Header 3</h3>
    <h4>Header 4</h4>
    <h5>Header 5</h5>
    <h6>Header 6</h6>
    <h3>Ruby Support:</h3>
    <p>
      <ruby>
        漢<rt>かん</rt>
        字<rt>じ</rt>
      </ruby>
      &nbsp;is Japanese Kanji.
    </p>
    <h3>Support for <code>sub</code>/<code>sup</code></h3>
    Solve for <var>x<sub>n</sub></var>: log<sub>2</sub>(<var>x</var><sup>2</sup>+<var>n</var>) = 9<sup>3</sup>
    <p>One of the most <span>common</span> equations in all of physics is <br /><var>E</var>=<var>m</var><var>c</var><sup>2</sup>.</p>
    <h3>Table support (with custom styling!):</h3>
    <p>
    <q>Famous quote...</q>
    </p>
    <table>
    <colgroup>
      <col width="50%" />
      <col width="25%" />
      <col width="25%" />
    </colgroup>
    <thead>
    <tr><th>One</th><th>Two</th><th>Three</th></tr>
    </thead>
    <tbody>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td>
    </tr>
    </tbody>
    <tfoot>
    <tr><td>fData</td><td>fData</td><td>fData</td></tr>
    </tfoot>
    </table>
    <h3>Custom Element Support:</h3>
    <flutter></flutter>
    <flutter horizontal></flutter>
    <h3>SVG support:</h3>
    <svg id='svg1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
          <circle r="32" cx="35" cy="65" fill="#F00" opacity="0.5"/>
          <circle r="32" cx="65" cy="65" fill="#0F0" opacity="0.5"/>
          <circle r="32" cx="50" cy="35" fill="#00F" opacity="0.5"/>
    </svg>
    <h3>List support:</h3>
    <ol>
          <li>This</li>
          <li><p>is</p></li>
          <li>an</li>
          <li>
          ordered
          <ul>
          <li>With<br /><br />...</li>
          <li>a</li>
          <li>nested</li>
          <li>unordered
          <ol>
          <li>With a nested</li>
          <li>ordered list.</li>
          </ol>
          </li>
          <li>list</li>
          </ul>
          </li>
          <li>list! Lorem ipsum dolor sit amet.</li>
          <li><h2>Header 2</h2></li>
          <h2><li>Header 2</li></h2>
    </ol>
    <h3>Link support:</h3>
    <p>
      Linking to <a href='https://github.com'>websites</a> has never been easier.
    </p>
    <h3>Image support:</h3>
    <p>
      <img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' />
      <a href='https://google.com'><img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' /></a>
      <img alt='Alt Text of an intentionally broken image' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30d' />
    </p>
    <!--
    <h3>Video support:</h3>
    <video controls>
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" />
    </video>
    <h3>Audio support:</h3>
    <audio controls>
      <source src="https://www.w3schools.com/html/horse.mp3" />
    </audio>
    <h3>IFrame support:</h3>
    <iframe src="https://google.com"></iframe>
    -->
  """;
  Map arguments;

  _NewsContentPageState(arguments) {
    this.arguments = arguments;
  }

  @override
  void initState() {
    super.initState();
    print(this.arguments);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("这是新闻详情页"),
        ),
        body: SingleChildScrollView(
            child: Html(
          data: this._html,
          //Optional parameters:
          style: {
            "html": Style(
              backgroundColor: Colors.black12,
//              color: Colors.white,
            ),
//            "h1": Style(
//              textAlign: TextAlign.center,
//            ),
            "table": Style(
              backgroundColor: Color.fromARGB(0x50, 0xee, 0xee, 0xee),
            ),
            "tr": Style(
              border: Border(bottom: BorderSide(color: Colors.grey)),
            ),
            "th": Style(
              padding: EdgeInsets.all(6),
              backgroundColor: Colors.grey,
            ),
            "td": Style(
              padding: EdgeInsets.all(6),
            ),
            "var": Style(fontFamily: 'serif'),
          },
          customRender: {
            "flutter": (RenderContext context, Widget child, attributes, _) {
              return FlutterLogo(
                style: (attributes['horizontal'] != null) ? FlutterLogoStyle.horizontal : FlutterLogoStyle.markOnly,
                textColor: context.style.color,
                size: context.style.fontSize.size * 5,
              );
            },
          },
          onLinkTap: (url) {
            print("Opening $url...");
          },
          onImageTap: (src) {
            print(src);
          },
          onImageError: (exception, stackTrace) {
            print(exception);
          },
        )));
  }
}
